import React from "react";
import styled from "styled-components";
import Config from "@/config";
import {userVipType} from "@/util/UserUtil";

const Container = styled.div`
  width: auto;
  min-width: 100px;
  height: 30px;
  text-align: center;
  position: relative;
  z-index: 0;
  float: left;
`
const IconContainer = styled.div`
  width: auto;
  height: 30px;
  position: relative;
  left: 5px;
  top: 0;
  z-index: 2;
`
const TextContainer = styled.div`
  width: auto;
  padding: 1px 10px 1px 15px;
  height: 17px;
  position: absolute;
  color: white;
  font-size: 12px;
  float: left;
  z-index: 1;
  left: 20px;
  top: 10px;
  border-radius: 0 8.5px 8.5px 0;
  line-height: 100%;

  &.vip-0 {
    top: 9px;
    background-image: linear-gradient(to right, #9e9ef6 0%, #9ba0b3 100%);
  }

  &.vip-1 {
    border-radius: 8.5px;
    height: 15px;
    left: 21px;
    top: 11.5px;
    padding-left: 12px;
    border-left: 50px;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  }

  &.vip-2 {
    width: 80%;
    height: 15px;
    padding-right: 0;
    top: 12px;
    left: 20px;
    border-radius: 0 8px 8px 0;
    background-image: linear-gradient(to right, #cfa3ff, #a2b5ff);

    svg {
      transform: scale(1.3);
      padding: 1.2px 0 0 0;
    }
  }

  &.vip-3 {
    height: 15px;
    top: 12px;
    background-image: linear-gradient(to right, #ffdd00, #ffb40d);
  }
`

export class JVip extends React.Component {
    render() {
        let vipType;
        if (!this.props.vipType && this.props.vipType !== 0) {
            vipType = userVipType();
        } else {
            vipType = this.props.vipType;
        }
        return <Container style={this.props.style}>
            <IconContainer>
                {
                    (() => {
                        switch (vipType) {
                            case 0:
                                return <>
                                    <Config.IconFont type={'icon-mianxingxingxingwubianxingzuanshishuijing'}
                                                     style={{fontSize: '30px', float: "left"}}/>
                                </>
                            case 1:
                                return <>
                                    <Config.IconFont type={'icon-mianxingxingxingzuanshishuijing'}
                                                     style={{fontSize: '30px', float: "left"}}/>
                                    {/*<Config.IconFont type={'icon-mianxingsibianlingxingzuanshishuijing'} style={{*/}
                                    {/*    fontSize: '20px',*/}
                                    {/*    position: "absolute",*/}
                                    {/*    left: '4.5px',*/}
                                    {/*    top: '1.8px'*/}
                                    {/*}}/>*/}
                                </>;
                            case 2:
                                return <>
                                    <Config.IconFont type={'icon-mianxingzuanshishuijing'}
                                                     style={{fontSize: '30px', float: "left", lineHeight: "136%"}}/>
                                    <Config.IconFont type={'icon-huangguan5'} style={{
                                        color: '#cd0d50',
                                        fontSize: '23px',
                                        position: "absolute",
                                        left: '3.6px',
                                        top: '-10px'
                                    }}/>
                                </>;
                            case 3:
                                return <>
                                    <Config.IconFont type={'icon-mianxinglingxingzuanshishuijing'}
                                                     style={{fontSize: '30px', float: "left"}}/>
                                    <Config.IconFont type={'icon-huangguan2'} style={{
                                        color: '#cd0d50',
                                        fontSize: '17px',
                                        position: "absolute",
                                        left: '6.5px',
                                        top: '-6px'
                                    }}/>
                                </>
                        }
                    })()
                }
            </IconContainer>
            <TextContainer className={`vip-${vipType}`}>
                {
                    (() => {
                        switch (vipType) {
                            case 0:
                                return "普通用户";
                            case 1:
                                return "高级会员";
                            case 2:
                                return <>
                                    <span style={{float: 'left'}}>年费会员</span>
                                    <Config.IconFont type={'icon-xingguangzhi'} style={{float: 'left'}}/>
                                </>;
                            case 3:
                                return <>
                                    <span style={{float: 'left'}}>永久会员</span>
                                </>;
                        }
                    })()
                }
            </TextContainer>
        </Container>
    }
}
